<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide()" :mask-closable="false" width="800">

            <Row>
                <Col span="12" style="padding-left: 30px; padding-top: 20px">
                    <div class="j-user-row">
                        <div class="j-user-label">头像：</div>
                        <div class="j-user-value">
                            <template v-if="userInfo.hidPic">
                                <Avatar shape="square" icon="ios-person" size="large" :src="userInfo.hidPic"/>
                            </template>
                            <template v-else>
                                <Avatar shape="square" icon="ios-person" size="large"/>
                            </template>
                        </div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">账号：</div>
                        <div class="j-user-value">{{userInfo.username}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">昵称：</div>
                        <div class="j-user-value">{{userInfo.nickName}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">等级：</div>
                        <div class="j-user-value">
                            <template v-if="userInfo.level == 0">普通会员</template>
                            <template v-if="userInfo.level == 1">体验员</template>
                            <template v-if="userInfo.level == 2">销售经理</template>
                            <template v-if="userInfo.level == 3">销售总监</template>
                            <template v-if="userInfo.level == 4">董事</template>
                        </div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">性别：</div>
                        <div class="j-user-value">{{userInfo.sex ? userInfo.sex == 1 ? '男':'女' : '-'}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">生日：</div>
                        <div class="j-user-value">{{userInfo.birthday ? userInfo.birthday : '-'}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">余额：</div>
                        <div class="j-user-value">{{userInfo.amount ? userInfo.amount : '-'}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">积分：</div>
                        <div class="j-user-value">{{userInfo.integral ? userInfo.integral : '-'}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">邀请码：</div>
                        <div class="j-user-value">{{userInfo.inviteCode ? userInfo.inviteCode : '-'}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">虚拟账户：</div>
                        <div class="j-user-value">{{userInfo.hbUrl ? userInfo.hbUrl : '-'}}</div>
                    </div>
                    <div class="j-user-row">
                        <div class="j-user-label">注册时间：</div>
                        <div class="j-user-value">{{userInfo.createTime ? userInfo.createTime : '-'}}</div>
                    </div>
                </Col>
                <Col span="12">
                    <div class="j-hb-lay">
                        <div class="j-hb-img">
                            <template v-if="userInfo.hbImg">
                                <img :src="userInfo.hbImg">
                            </template>
                            <template v-else>
                                <Icon type="md-images" size="55" color="#c5c8ce" />
                            </template>
                        </div>
                    </div>
                </Col>
            </Row>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide()">取消</Button>
                <Button type="primary" @click="hide()" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "user-ope",
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                title: '查看信息',
                userInfo: {}
            }
        },
        methods: {
            // 显示模态框
            show(type, row) {
                this.isShowModal = true;
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                switch (type) {
                    case 1:
                        this.title = '用户信息';
                        this.findInfo(row);
                        break;
                    case 2:
                        this.title = '新增用户';
                        break;
                    case 3:
                        this.title = '编辑用户';
                        this.findInfo(row);
                        break;
                    default:
                        this.$Notice.error({
                            title: '用户管理',
                            desc: '查看，新增，编辑模态框报错',
                            duration: 0
                        });
                        break
                }
            },
            // 查询用户详情
            findInfo(row) {
                this.$Spin.show();
                this.axios.post('/user/findInfo', {
                    userId: row.userId
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.userInfo = res.data;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看用户详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        }
    }
</script>

<style scoped>
    .j-user-row {
        display: flex;
        align-items: flex-start;
        margin-top: 20px;
    }

    .j-user-row .j-user-label{
        min-width: 80px;
    }

    .j-user-row .j-user-value{
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    .j-user-row:first-of-type {
        margin-top: 0px;
    }

    .j-hb-img{
        height: 590px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: #f8f8f9;
    }
    .j-hb-img img{
        width: 100%;
        height: 100%;
    }
</style>